从一个线框图开始

步骤1：将 UI 拆解到组件层次结构中

如果你和设计师一起工作，他们可能已经做了这些工作，所以去和他们交流一下！

但是你该如何拆分组件呢？其实只需要像拆分一个新方法或新对象一样的方式即可。一个常用的技巧是单一职责原则，即一个组件理想情况下只处理一件事。如果一个组件持续膨胀，就应该将其拆分为多个更小的组件中。

步骤2：用 React 构建一个静态版本

目前为止你已经有了组件层次结构，现在是时候实现你的 app 了。最简单的方法是构建一个采用数据模型并渲染 UI 但没有交互性的版本。最好解耦这些处理，因为构建静态版本需要大量的代码和少量的思考，而添加交互需要大量思考和少量的代码。我们将看到原因。

要构建你 app 的一个静态版本，用于渲染数据模型，您将需要构建复用其他组件并使用 props 传递数据的组件。props 是将数据从父级组件传递到子级的一种方式。如果你熟悉 state 的概念，在构建静态版本时不要使用 state 。state 只用于交互，也就是说，数据可以随时被改变。由于这是一个静态版本 app，所以你并不需要使用 state 。

您可以自上而下或自下而上构建。也就是说，您可以从构建层次结构中顶端的组件开始（即从 FilterableProductTable 开始），也可以从构建层次结构中底层的组件开始（即 ProductRow ）。
在更简单的例子中，通常自上而下更容易，而在较大的项目中，自下而上，更有利于编写测试。

### 小插曲: Props(属性) vs State(状态)

步骤3：确定 UI state(状态) 的最小（但完整）表示

这里的关键是：DRY: 不要重复你自己。

步骤4：确定 state(状态) 的位置

记住：React 单向数据流在层级中自上而下进行。这样有可能不能立即判断出状态属于哪个组件。这常常是新手最难理解的一部分，试着按下面的步骤分析操作

步骤5：添加反向数据流

目前，构建的应用已经具备了正确渲染 props(属性) 和 state(状态) 沿着层次结构向下传播的功能。现在是时候实现另一种数据流方式：层次结构中深层的 form(表单) 组件需要更新 FilterableProductTable 中的 state(状态) 。

React 中明确的数据流向，使你容易理解程序如何运行。但是相比传统的数据双向绑定来说，的确需要多敲一些代码。

就这么简单

2018.9.14 星期六 00:35